<template>
    <view class="concat">
        <!-- 背景图 -->
        <view class="bcimgw">
            <image src="../../static/游乐场地图.png"></image>

        </view>
        <view class="shaizi">
            <image v-if="showDiceAnimation" :src="diceImage" />
        </view>

        <!--  log -->
        <transition name="logo-move">
            <view v-show="showlogo" class="logo">
                <image src="../../static/LOGO.png"></image>
            </view>
        </transition>
        <!-- 抽奖记录 -->
        <transition name="cjjl-move">
            <view v-show="showcjjl" class="cjjl">
                <image src="../../static/组 21.png"></image>
            </view>
        </transition>
        <!--  地块 -->
        <view class="parcelwarp">
            <!-- 起点 -->
            <view class="origin">
                <image src="../../static/地块6 拷贝.png"></image>
            </view>
            <!-- 地块1 -->
            <view class="paecel1">
                <image src="../../static/黄色方块1.png"></image>
                <view v-show="fg1" class="fgd">
                    <image src="../../static/棋盘动画大.gif"></image>
                </view>
            </view>
            <!-- 地块2 -->
            <view class="paecel2">
                <image src="../../static/地块1.png"></image>
                <view v-show="fg2" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块3 -->
            <view class="paecel3">
                <image src="../../static/地块18.png"></image>
                <view v-show="fg3" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块4 -->
            <view class="paecel4">
                <image src="../../static/地块12.png"></image>
                <view v-show="fg4" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块5 -->
            <view class="paecel5">
                <image src="../../static/地块13.png"></image>
                <view v-show="fg5" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块6 -->
            <view class="paecel6">
                <image src="../../static/地块14.png"></image>
                <view v-show="fg6" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块7 -->
            <view class="paecel7">
                <image src="../../static/地块15.png"></image>
                <view v-show="fg7" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块8 -->
            <view class="paecel8">
                <image src="../../static/换色地块2.png"></image>
                <view v-show="fg8" class="fgd">
                    <image src="../../static/棋盘动画大.gif"></image>
                </view>
            </view>
            <!-- 地块9 -->
            <view class="paecel9">
                <image src="../../static/地块16.png"></image>
                <view v-show="fg9" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块10 -->
            <view class="paecel10">
                <image src="../../static/地块17.png"></image>
                <view v-show="fg10" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块11 -->
            <view class="paecel11">
                <image src="../../static/地块10.png"></image>
                <view v-show="fg11" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块12 -->
            <view class="paecel12">
                <image src="../../static/地块11.png"></image>
                <view v-show="fg12" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块13 -->
            <view class="paecel13">
                <image src="../../static/地块9.png"></image>
                <view v-show="fg13" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块14 -->
            <view class="paecel14">
                <image src="../../static/地块8.png"></image>
                <view v-show="fg14" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块15 -->
            <view class="paecel15">
                <image src="../../static/地块7.png"></image>
                <view v-show="fg15" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块16 -->
            <view class="paecel16">
                <image src="../../static/换色地块2 拷贝.png"></image>
                <view v-show="fg16" class="fgd">
                    <image src="../../static/棋盘动画大.gif"></image>
                </view>
            </view>
            <!-- 地块17 -->
            <view class="paecel17">
                <image src="../../static/地块5.png"></image>
                <view v-show="fg17" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块18 -->
            <view class="paecel18">
                <image src="../../static/地块4.png"></image>
                <view v-show="fg18" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块19 -->
            <view class="paecel19">
                <image src="../../static/地块3.png"></image>
                <view v-show="fg19" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
            <!-- 地块20 -->
            <view class="paecel20">
                <image src="../../static/地块2.png"></image>
                <view v-show="fg20" class="fg">
                    <image src="../../static/棋盘动画.gif"></image>
                </view>
            </view>
        </view>
        <!-- 棋子 -->
        <view class="chess" :class="{ 'no-transition': disableTransition }"
            :style="{ top: chessTop + 'rpx', left: chessLeft + 'rpx' }">
            <image src="../../static/图层 90.png"></image>
        </view>
        <!-- 礼盒 -->
        <view class="gift" v-show="shwGift">
            <image src="../../static/礼盒.png"></image>
        </view>
        <!-- 旋转木马 -->
        <view class="xzmm" v-show="shwGift">
            <image src="../../static/旋转木马.png"></image>
        </view>

        <!-- 拱门 -->
        <view class="arch" v-show="showArch">
            <image src="../../static/拱门.png"></image>
        </view>
        <!-- 抽奖一次 -->
        <transition name="cjbtn1-move">
            <view v-show='showcjbtn' class="cjbtn1" @click="startAnimation1()">

                <!-- 抽奖按钮 -->
                <view class="btn">
                    <image src="../../static/曲线2.png"></image>

                    <!-- 荣耀币 -->
                    <view class="btntw">

                        <image class="cjtbj" src="../../static/矩形 1.png"></image>

                        <image class="ryb" src="../../static/荣曜币：.png"></image>
                        <!-- 荣耀币数字 -->
                        <text class="rybt">{{manghe.one_fee}}</text>
                    </view>

                </view>

            </view>
        </transition>
        <!-- 抽奖五次 -->
        <transition name="cjbtn2-move">
            <view v-show='showcjbtn' class="cjbtn2" @click="startAnimation5()">

                <!-- 抽奖按钮 -->
                <view class="btn">
                    <image src="../../static/曲线1.png"></image>

                    <!-- 荣耀币 -->
                    <view class="btntw">
                        <image class="cjtbj" src="../../static/矩形 1.png"></image>
                        <image class="ryb" src="../../static/荣曜币：.png"></image>
                        <!-- 荣耀币数字 -->
                        <text class="rybt">{{manghe.five_fee }}</text>
                    </view>
                </view>

            </view>
        </transition>
        <!-- 大奖 -->
        <transition name="dajiang-move">
            <view v-show='showcjbtn' class="dajiang">
                <image src="../../static/组 10.png"></image>
            </view>
        </transition>
        <!-- 弹窗 -->
        <view class=" tc" v-show="showPopup">

            <view class="tcjpw">

                <view class="tcjp">
                    <image src="../../static/弹窗框.png">
                        <view class="jpw">
                            <view class="jp" v-for="(item,index) in prizeinfo" :key="index">
                                <image v-show="item.type === 1&&prizeinfo.length===1" class="tcxx"
                                    src="../../static/谢谢惠顾.png"></image>
                                <image v-show="item.type !== 1" class="tcgx" src="../../static/恭喜获得.png"></image>
                                <view class="jpicm">
                                    <image v-show="item.type === 1" src="../../static/谢谢参与.png">
                                    </image>
                                    <image v-show="item.type === 2" src="../../static/荣曜币.png"></image>
                                    <image v-show="item.type === 3" src="../../static/线下 核销.png"></image>

                                </view>
                                <view class="jptext">
                                    {{item.type===2?item.title+item.value:item.value}}
                                </view>
                            </view>
                        </view>

                    </image>
                </view>
                <view v-show="showtcbtn" class="tcbtn" @click="closepop()">
                    <image src="../../static/确定.png"></image>
                </view>
            </view>

        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                //显示
                showDiceAnimation: false, //骰子显示
                showArch: true, //拱门显示
                shwGift: true, //礼盒显示
                showPopup: false, // 弹窗显示
                showcjbtn: false, //大奖和按钮显示
                showtcbtn: true, //弹窗确认按钮
                showlogo: false, //大富翁logo显示
                showcjjl: false, //抽奖记录显示

                token: '68eee12dbf3f50136efa84fe565debcd',
                diceImage: '',
                chessTop: 738.65, // 棋子距离顶部的位置
                chessLeft: 427.39, // 棋子距离左侧的位置
                disableTransition: false, //棋子消除动画效果
                targetParcel: null, // 1次目标地块，
                targetParcel5: [], // 5次目标地块，
                kg: false, //判断是否结束一次循环
                innerAudioContext: null, // 播放弹窗音频
                zdAudioContext: null, // 播放中奖音频
                tAudioContext: null, // 播放跳动音频
                one_fee: 100, //一次盲盒费用
                five_fee: 480, //五次盲盒费用
                manghe: {
                    one_fee: 0, //一次盲盒费用
                    five_fee: 0, //五次盲盒费用
                },
                prizeinfo: [{
                    "type": 1,
                    "value": "谢谢参与",
                    "id": 2,
                    "title": "谢谢参与"
                }, ], //奖品信息
                //盲盒信息
                prize: [], //中奖礼品
                parcelPositions: [{
                        left: 308.64,
                        top: 743.05,
                        width: 121.36,
                        height: 83.82
                    }, // 地块1
                    {
                        left: 379.808,
                        top: 723.06,
                        width: 112.19,
                        height: 75.52
                    }, // 地块2
                    {
                        left: 434.81,
                        top: 698.49,
                        width: 112.19,
                        height: 75.52
                    }, // 地块3
                    {
                        left: 433.06,
                        top: 637.42,
                        width: 112.19,
                        height: 75.52
                    }, // 地块4
                    {
                        left: 488.07,
                        top: 611.61,
                        width: 112.19,
                        height: 75.52
                    }, // 地块5
                    {
                        left: 543.58,
                        top: 578.8,
                        width: 112.19,
                        height: 75.52
                    }, // 地块6
                    {
                        left: 484.58,
                        top: 553.11,
                        width: 112.19,
                        height: 75.52
                    }, // 地块7
                    {
                        left: 532.63,
                        top: 508.88,
                        width: 121.36,
                        height: 83.82
                    }, // 地块8
                    {
                        left: 476.46,
                        top: 488.31,
                        width: 112.19,
                        height: 75.52
                    }, // 地块9
                    {
                        left: 419.09,
                        top: 460.18,
                        width: 112.19,
                        height: 75.52
                    }, // 地块10
                    {
                        left: 308.21,
                        top: 461.87,
                        width: 112.19,
                        height: 75.52
                    }, // 地块11
                    {
                        left: 248.27,
                        top: 429.19,
                        width: 112.19,
                        height: 75.52
                    }, // 地块12
                    {
                        left: 193.83,
                        top: 461,
                        width: 112.19,
                        height: 75.52
                    }, // 地块13
                    {
                        left: 138.82,
                        top: 489.81,
                        width: 112.19,
                        height: 75.52
                    }, // 地块14
                    {
                        left: 141.44,
                        top: 546.57,
                        width: 112.19,
                        height: 75.52
                    }, // 地块15
                    {
                        left: 74,
                        top: 566.51,
                        width: 121.36,
                        height: 83.82
                    }, // 地块16
                    {
                        left: 78.74,
                        top: 634.55,
                        width: 112.19,
                        height: 75.52
                    }, // 地块17
                    {
                        left: 136.2,
                        top: 669.24,
                        width: 112.19,
                        height: 75.52
                    }, // 地块18
                    {
                        left: 195.14,
                        top: 698.49,
                        width: 112.19,
                        height: 75.52
                    }, // 地块19
                    {
                        left: 255.57,
                        top: 724.17,
                        width: 112.19,
                        height: 75.52
                    } // 地块20
                ],
                //发光
                fg1: false,
                fg2: false,
                fg3: false,
                fg4: false,
                fg5: false,
                fg6: false,
                fg7: false,
                fg8: false,
                fg9: false,
                fg10: false,
                fg11: false,
                fg12: false,
                fg13: false,
                fg14: false,
                fg15: false,
                fg16: false,
                fg17: false,
                fg18: false,
                fg19: false,
                fg20: false,


            };

        },
        // computed: {

        //     diceImage() {
        //         // 获取当前时间戳
        //         const timestamp = new Date().getTime();
        //         // 根据 targetParcel 的数值拼接对应的图片路径，并添加时间戳作为参数
        //         let imgsrc = null
        //         imgsrc = `../../static/骰子-${this.targetParcel}.gif?${timestamp}`
        //         return imgsrc;
        //     }
        // },
        created() {
            this.fetchData()
        },
        mounted() {
            // 在页面加载时设置showLogo为true，触发logo进入动画
            this.showlogo = true;
            this.showcjbtn = true; //大奖和按钮显示
            this.showcjjl = true; //抽奖记录显示

        },
        methods: {
            //棋子消除动画效果
            async moveChessToStart() {
                // 移动棋子到起点的代码逻辑

                // 禁用过渡效果
                this.disableTransition = true;

                // 棋子回到起点的动画效果

                // 延迟一段时间后重新启用过渡效果
                setTimeout(() => {
                    this.disableTransition = false;
                }, 10); // 可以根据需要调整延迟的时间
            },
            //关闭弹窗
            closepop() {
                this.showPopup = false
                this.showlogo = true
                this.showcjjl = true
                this.showcjbtn = true
                this['fg' + this.targetParcel] = false

            },
            //最后一次弹窗显示
            showpop(index) {
                this.showlogo = false
                this.showcjjl = false
                this.showcjbtn = false;
                if (index !== 4) {

                    this.prizeinfo = [this.prize[index]]; // 将单个奖品对象放入数组中
                    this.showPopup = true;

                } else {

                    this.prizeinfo = this.prize;
                    this.showPopup = true;

                }
            },
            //获取盲盒信息
            fetchData() {
                // 发送GET请求
                uni.request({
                    url: 'https://api.wxkf168.cn/api/v1/blindBox/getBlindBox/2',
                    method: 'GET',
                    header: {

                        'token': this.token // 在请求头部携带token参数
                    },
                    success: (res) => {
                        if (res.data.code === 200) {
                            // 如果请求成功，将返回的数据放入this.manghe数组中
                            this.manghe = res.data.data;

                        } else {
                            // 如果请求失败，处理错误

                            console.log(res);

                        }
                    },
                    fail: (err) => {
                        // 请求失败，处理错误
                        console.log(err);
                    }
                });
            },
            //获取一次盲盒信息
            async postData1() {
                this.targetParcel = null
                try {
                    // 设置请求头部
                    const header = {
                        'Content-Type': 'application/json',
                        'token': this.token
                    };

                    // 设置请求体参数
                    const data = {
                        num: 1
                    };

                    // 发送 POST 请求
                    const res = await uni.request({
                        url: 'https://api.wxkf168.cn/api/v1/blindBox/openBlindBox/2',
                        method: 'POST',
                        header: header,
                        data: data
                    });

                    // 处理响应结果
                    if (res.data.code === 200) {
                        this.prize = []
                        this.prize = res.data.data.prize
                        this.targetParcel = this.prize[0].id

                    } else {
                        this.targetParcel = null
                        this.targetParcel5 = []
                        console.log(res);
                    }
                } catch (error) {
                    this.targetParcel = null
                    this.targetParcel5 = []
                    console.log(error);
                }
            },
            //获取五次盲盒信息
            async postData5() {
                this.targetParcel = null
                this.targetParcel5 = []
                try {
                    // 设置请求头部
                    const header = {
                        'Content-Type': 'application/json',
                        'token': this.token
                    };

                    // 设置请求体参数
                    const data = {
                        num: 5
                    };

                    // 发送 POST 请求
                    const res = await uni.request({
                        url: 'https://api.wxkf168.cn/api/v1/blindBox/openBlindBox/2',
                        method: 'POST',
                        header: header,
                        data: data
                    });

                    // 处理响应结果
                    if (res.data.code === 200) {
                        this.prize = []
                        this.prize = res.data.data.prize
                        this.targetParcel5 = []
                        this.prize.forEach((item) => {
                            this.targetParcel5.push(item.id)
                        })
                        console.log(res);

                    } else if (res.data.code === 201) {
                        this.targetParcel = null
                        this.targetParcel5 = []
                        console.log(res);

                    } else {
                        this.targetParcel = null
                        this.targetParcel5 = []
                        console.log(res);
                    }
                } catch (error) {
                    this.targetParcel = null
                    this.targetParcel5 = []
                    console.log(error);
                }
            },

            // 弹窗
            playWinSound(index) {
                this.showpop(index)
                // return new Promise(resolve => {
                //     this.innerAudioContext = uni.createInnerAudioContext(); // 创建音频对象
                //     this.innerAudioContext.src = '../../static/弹窗声音.mp3'; // 设置音频源
                //     this.innerAudioContext.play(); // 播放中奖音频
                //     // this.innerAudioContext.onEnded(function() {
                //     //     innerAudioContext.destroy();
                //     // });
                //     // 监听音频播放事件
                //     this.innerAudioContext.onPlay(() => {
                //         // 音频开始播放时，同时显示弹窗
                //         this.showpop(index)
                //         resolve(); // 解析 Promise，表示音频已开始播放
                //     });
                // });
            },
            // 播放中奖音频
            playzj(index) {
                this.zdAudioContext = uni.createInnerAudioContext(); // 创建音频对象
                this.zdAudioContext.src = '../../static/中奖声音.mp3'; // 设置音频源
                this.zdAudioContext.play(); // 播放中奖音频

                this['fg' + index] = true

                // this.zdAudioContext.onEnded(function() {
                //     zdAudioContext.destroy();
                // });
            }, //播放弹跳音频
            playJumpSound() {
                this.tAudioContext = uni.createInnerAudioContext(); // 创建音频对象
                this.tAudioContext.src = '../../static/跳声音.mp3'; // 设置音频源 
                this.tAudioContext.play(); // 播放音频
                // this.tAudioContext.onEnded(function() {
                //     tAudioContext.destroy();
                // });
            },
            //单次弹跳 。
            jumpToParcel(parcelIndex) {
                this.showDiceAnimation = false;
                const parcel = this.parcelPositions[parcelIndex - 1];
                const targetTop = parcel.top + parcel.height - 105; // 棋子底部在地块中间偏下一点
                const targetLeft = parcel.left + parcel.width - 70;

                // 计算向上跳的目标位置和落下的目标位置
                const jumpTop = targetTop - 40; // 向上跳的目标位置比目标位置高100rpx

                setTimeout(() => {
                    // 控制拱门显示与隐藏
                    if (parcelIndex === 7) {
                        this.showArch = false; // 隐藏拱门
                    } else {
                        this.showArch = true; // 显示拱门
                    }
                    if (parcelIndex === 16) {
                        this.shwGift = false; // 隐藏拱门
                    } else {
                        this.shwGift = true; // 显示拱门
                    }
                }, 200);


                // 棋子向上跳起的动态效果
                this.chessTop = jumpTop;

                // 根据不同的地块设置不同的跳跃效果
                switch (parcelIndex) {
                    case 1:
                        this.chessLeft = targetLeft + 36;
                        break;
                    case 2:
                    case 3:
                    case 5:
                    case 6:
                    case 8:
                        this.chessLeft = targetLeft - 26;
                        break;
                    case 7:
                        this.chessLeft = targetLeft + 56;
                        break;
                    case 11:
                        this.chessLeft = targetLeft + 66;
                        break;
                    case 13:
                    case 14:
                        this.chessLeft = targetLeft + 26;
                        this.chessTop = jumpTop - 30;
                        break;
                    case 15:
                    case 16:
                    case 17:
                        this.chessTop = jumpTop - 40;
                        break;
                    case 18:
                    case 19:
                    case 20:
                        this.chessTop = jumpTop - 20;
                        this.chessLeft = targetLeft - 5;
                        break;
                    default:
                        // Default case if needed
                        break;
                }

                setTimeout(() => {
                    // 棋子向目的地落下的动态效果
                    this.chessTop = targetTop;
                    this.chessLeft = targetLeft;
                    this.playJumpSound(); // 播放跳跃音效
                    // 等待一段时间后执行下一个操作
                    setTimeout(() => {

                        this.nextParcel(parcelIndex);
                    }, 800);
                }, 300);
            },
            //下次弹跳
            nextParcel(currentParcelIndex) {
                if (currentParcelIndex < this.targetParcel) {
                    this.kg = false,
                        this.jumpToParcel(currentParcelIndex + 1);
                } else {
                    this.kg = true,


                        this.playzj(currentParcelIndex); // 播放中奖音效并等待音频开始播放
                }
            },

            getDiceAnimation() {
                // 获取当前时间戳
                const timestamp = new Date().getTime();
                // 根据 targetParcel 的数值拼接对应的图片路径，并添加时间戳作为参数
                this.diceImage = `../../static/骰子定稿动画-${this.targetParcel}.gif?${timestamp}`

            },
            //点击开始跳跃一次
            async startAnimation1() {

                await this.moveChessToStart();
                this.chessTop = 738.65; // 重置棋子位置
                this.chessLeft = 427.39;
                this.showtcbtn = true;
                this.showcjbtn = false;
                await this.postData1();

                console.log(this.targetParcel);
                if (this.targetParcel) {

                    this.kg = false;
                    this.getDiceAnimation()
                    this.showDiceAnimation = true;

                    // 播放动画时隐藏弹窗
                    this.showPopup = false;

                    setTimeout(() => {
                        // 动画播放完毕后隐藏动图
                        this.showDiceAnimation = false;
                        this.jumpToParcel(1); // 跳一次
                    }, 2000); // 延迟时间要与动画时长一致，这里假设动画时长为 3 秒
                    await this.waitForJumpToEnd();
                    this.playWinSound(0);
                }

            }, //点击开始跳跃五次
            async startAnimation5() {
                await this.moveChessToStart()
                this.chessTop = 738.65; // 重置棋子位置
                this.chessLeft = 427.39;

                await this.postData5();

                if (this.targetParcel5.length > 4) {
                    this.showcjbtn = false;
                    this.kg = false;
                    this.showtcbtn = false;
                    this.loopCounter = 0; // 重置循环计数器
                    this.loopJump(0); // 循环跳动五次，从 targetParcel5 数组的第一个位置开始

                }


            },
            //5次跳跃
            async loopJump(index) {
                if (index < 5) {
                    this.kg = false;
                    this.showtcbtn = false;
                    const target = this.targetParcel5[index]; // 获取当前循环的终点位置

                    this.targetParcel = target; // 设置当前循环的终点位置
                    // 播放动画时隐藏弹窗
                    this.getDiceAnimation()
                    this.showPopup = false;

                    this.showDiceAnimation = true;

                    setTimeout(() => {
                        // 动画播放完毕后隐藏动图
                        this.showDiceAnimation = false;
                        this.jumpToParcel(1); // 跳一次
                    }, 2000); // 延迟时间要与动画时长一致，这里假设动画时长为 3 秒
                    await this.waitForJumpToEnd(); // 等待当前循环结束
                    if (index < 4) {


                        await this.moveChessToStart()

                        this.chessTop = 738.65; // 重置棋子位置
                        this.chessLeft = 427.39;
                        this.showcjbtn = false
                        this.playWinSound(index)

                        setTimeout(() => {
                            this.showPopup = false;

                            this['fg' + this.targetParcel] = false
                            this.showcjbtn = false
                            this.loopJump(index + 1); // 延迟一秒后开始下一次循环



                        }, 3000);
                    } else {

                        this.loopJump(index + 1); // 延迟一秒后开始下一次循环
                        this.playWinSound(index)
                    }

                } else {
                    this.showtcbtn = true;
                    // this.showcjbtn = true; // 循环结束后，恢复按钮显示
                }
            }, // 检查棋子是否到达目标地块
            waitForJumpToEnd() {
                return new Promise(resolve => {
                    const intervalId = setInterval(() => {

                        // 检查棋子是否到达目标地块
                        if (this.kg) {
                            clearInterval(intervalId); // 清除定时器
                            resolve(); // 解析 Promise，表示棋子已到达目标地块
                        }
                    }, 1000); // 检查间隔时间，可以根据需要调整
                });
            },


        },
        beforeDestroy() {
            // 停止播放所有音频
            if (this.innerAudioContext) {
                this.innerAudioContext.stop();
            }
            if (this.zdAudioContext) {
                this.zdAudioContext.stop();
            }
            if (this.tAudioContext) {
                this.tAudioContext.stop();
            }
            // 释放音频对象
            this.innerAudioContext = null;
            this.zdAudioContext = null;
            this.tAudioContext = null;
        }

    }
</script>
<style lang="less">
    /* uni.css */
    @media (min-width: 501px) {

        /* 设置页面最大宽度为 375px */
        .concat {
            max-width: 375px;
            margin: 0 auto;
            position: relative;
            /* 居中对齐 */
        }

        image {
            max-width: 375px;
        }
    }



    .concat {
        width: 750rpx;

        height: 100vh;
        overflow: hidden;

        image {

            width: 100%;
            height: 100%;
        }

        .shaizi {
            position: absolute;
            top: 840rpx;
            left: 200rpx;
            z-index: 3200;
            width: 360rpx;
            height: 270rpx;

        }

        //棋子消除动画效果
        .no-transition {
            transition: none !important;
        }

        .bcimgw {
            width: 750rpx;
            height: 100vh;
            overflow: hidden;
            position: relative;

            image {
                width: 750rpx;
                height: 1585rpx;
            }
        }

        .logo {
            width: 531rpx;
            height: 262rpx;
            position: absolute;
            left: 110rpx;
            top: 52rpx;
        }

        .logo-move-enter-active,
        .logo-move-leave-active {
            transition: top 2s ease;
            /* 使用动画效果 */
        }

        .logo-move-enter,
        .logo-move-leave-to

        /* .logo-move-leave-active in <2.1.8 */
            {
            top: -262rpx;
            /* 初始位置在页面顶部之外 */
        }

        .logo-move-enter-to,
        .logo-move-leave

        /* .logo-move-leave-active in <2.1.8 */
            {
            top: 52rpx;
            /* 最终位置在页面顶部往下一点 */
        }

        .cjjl {
            width: 183rpx;
            height: 51rpx;
            position: absolute;
            right: 4rpx;
            top: 350rpx;
        }

        .cjjl-move-enter-active,
        .cjjl-move-leave-active {
            transition: right 2s ease;
            /* 使用动画效果 */
        }

        .cjjl-move-enter,
        .cjjl-move-leave-to {
            right: -185rpx;
        }

        .cjjl-move-enter-to,
        .cjjl-move-leave {
            right: 4rpx;
            /* 最终位置在页面顶部往下一点 */
        }

        .parcelwarp {

            .fg {
                width: 190rpx;
                height: 136rpx;
                position: absolute;
                left: -34rpx;
                top: -36rpx;
                z-index: 399;
            }

            .fgd {
                width: 176rpx;
                height: 106rpx;
                position: absolute;
                left: -30rpx;
                top: -22rpx;
                z-index: 399;
            }

            .origin {
                width: 131.84rpx;
                height: 98.66rpx;
                position: absolute;
                left: 375.87rpx;
                top: 771.83rpx;
                z-index: 100;
            }

            .paecel1 {
                width: 121.36rpx;
                height: 83.82rpx;
                position: absolute;
                left: 313.88rpx;
                top: 751.75rpx;
                z-index: 99;
            }

            .paecel2 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 379.8rpx;
                top: 726.86rpx;
                z-index: 98;


            }

            .paecel3 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 434.81rpx;
                top: 698.49rpx;
                z-index: 97;
            }

            .paecel4 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 433.06rpx;
                top: 640.42rpx;
                z-index: 96;
            }

            .paecel5 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 488.07rpx;
                top: 611.61rpx;
                z-index: 95;
            }

            .paecel6 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 543.51rpx;
                top: 582.8rpx;
                z-index: 94;
            }

            .paecel7 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 484.58rpx;
                top: 553.11rpx;
                z-index: 93;
            }

            .paecel8 {
                width: 121.36rpx;
                height: 83.82rpx;
                position: absolute;
                left: 537.83rpx;
                top: 516.88rpx;
                z-index: 92;
            }

            .paecel9 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 478.46rpx;
                top: 493.31rpx;
                z-index: 91;
            }

            .paecel10 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 419.09rpx;
                top: 463.18rpx;
                z-index: 90;
            }

            .paecel11 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 308.21rpx;
                top: 461.87rpx;
                z-index: 91;
            }

            .paecel12 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 249.27rpx;
                top: 432.19rpx;
                z-index: 90;


            }

            .paecel13 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 193.83rpx;
                top: 461rpx;
                z-index: 91;
            }

            .paecel14 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 138.82rpx;
                top: 489.81rpx;
                z-index: 92;
            }

            .paecel15 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 141.44rpx;
                top: 546.57rpx;
                z-index: 93;
            }

            .paecel16 {
                width: 121.36rpx;
                height: 83.82rpx;
                position: absolute;
                left: 76.4rpx;
                top: 574.51rpx;
                z-index: 94;
            }

            .paecel17 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 78.14rpx;
                top: 639.55rpx;
                z-index: 95;
            }

            .paecel18 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 136.2rpx;
                top: 669.24rpx;
                z-index: 96;
            }

            .paecel19 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 195.14rpx;
                top: 698.49rpx;
                z-index: 97;
            }

            .paecel20 {
                width: 112.19rpx;
                height: 75.52rpx;
                position: absolute;
                left: 254.07rpx;
                top: 728.17rpx;
                z-index: 98;
            }

        }

        .chess {
            width: 27.07rpx;
            height: 67.23rpx;
            position: absolute;
            left: 427.39rpx;
            top: 738.65rpx;
            z-index: 1000;
            transition: left 0.3s linear, top 0.3s linear;
            /* 添加过渡效果 */
        }

        .no-transition {
            transition: none;
        }

        .gift {
            width: 72.03rpx;
            height: 74.65rpx;
            position: absolute;
            left: 103.03rpx;
            top: 544.82rpx;
            z-index: 200;
        }

        .arch {
            width: 58.5rpx;
            height: 86.44rpx;
            position: absolute;
            left: 512.95rpx;
            top: 511.2rpx;
            z-index: 200;
        }



        .xzmm {
            width: 159rpx;
            height: 177rpx;
            position: absolute;
            left: 278rpx;
            top: 500rpx;

            z-index: 2000;
        }

        .cjbtn1 {
            width: 192rpx;
            height: 86rpx;
            position: absolute;
            left: 100rpx;
            bottom: 540rpx;

            .btntw {
                width: 130rpx;
                height: 28rpx;
                position: absolute;
                left: 32rpx;
                top: -24rpx;
                z-index: 3400;

                .cjtbj {
                    width: 130rpx;
                    height: 28rpx;
                    position: absolute;
                    z-index: 3400;


                }

                .ryb {
                    width: 62rpx;
                    height: 22rpx;
                    top: 3rpx;
                    position: absolute;
                    left: 6rpx;
                    z-index: 3500;
                }

                .rybt {
                    color: #e97b25;
                    font-size: 12px;
                    height: 24rpx;
                    line-height: 24rpx;
                    top: 2rpx;
                    position: absolute;
                    left: 74rpx;
                    z-index: 3500;
                    font-weight: 900;
                }
            }

            .btn {
                width: 192rpx;
                height: 86rpx;
                position: absolute;


                z-index: 3200;
            }
        }

        .cjbtn1-move-enter-active,
        .cjbtn1-move-leave-active {
            transition: left 2s ease;
            /* 使用动画效果 */
        }

        .cjbtn1-move-enter,
        .cjbtn1-move-leave-to {
            left: -200rpx;
        }

        .cjbtn1-move-enter-to,
        .cjbtn1-move-leave {
            left: 100rpx;
            /* 最终位置在页面顶部往下一点 */
        }

        .cjbtn2 {
            width: 192rpx;
            height: 86rpx;
            position: absolute;
            right: 100rpx;
            bottom: 540rpx;

            .btntw {
                width: 130rpx;
                height: 28rpx;
                position: absolute;
                left: 32rpx;
                top: -24rpx;
                z-index: 3400;

                .cjtbj {
                    width: 130rpx;
                    height: 28rpx;
                    position: absolute;
                    z-index: 3400;


                }

                .ryb {
                    width: 62rpx;
                    height: 22rpx;
                    top: 3rpx;
                    position: absolute;
                    left: 6rpx;
                    z-index: 3500;
                }

                .rybt {
                    color: #e97b25;
                    font-size: 12px;
                    height: 24rpx;
                    line-height: 24rpx;
                    top: 2rpx;
                    position: absolute;
                    left: 74rpx;
                    z-index: 3500;
                    font-weight: 900;
                }
            }

            .btn {
                width: 192rpx;
                height: 86rpx;
                position: absolute;

                z-index: 3200;
            }
        }

        .cjbtn2-move-enter-active,
        .cjbtn2-move-leave-active {
            transition: right 2s ease;
            /* 使用动画效果 */
        }

        .cjbtn2-move-enter,
        .cjbtn2-move-leave-to {
            right: -200rpx;
        }

        .cjbtn2-move-enter-to,
        .cjbtn2-move-leave {
            right: 100rpx;
            /* 最终位置在页面顶部往下一点 */
        }

        .dajiang {
            width: 605rpx;
            height: 533rpx;
            position: absolute;
            left: 72rpx;
            bottom: 6rpx;
            z-index: 2000;
        }

        .dajiang-move-enter-active,
        .dajiang-move-leave-active {
            transition: bottom 2s ease;
            /* 使用动画效果 */
        }

        .dajiang-move-enter,
        .dajiang-move-leave-to {
            bottom: -533rpx;
        }

        .dajiang-move-enter-to,
        .dajiang-move-leave {
            bottom: 6rpx;
            /* 最终位置在页面顶部往下一点 */
        }

        .tc {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(8, 8, 8, 0.7);
            z-index: 9999;

            .tcjpw {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                height: 100vh;

                .tcjp {
                    width: 750rpx;
                    height: 680rpx;
                    position: relative;

                    .jpw {
                        width: 750rpx;
                        height: 680rpx;
                        position: absolute;
                        top: 0;
                        padding: 200rpx 220rpx;
                        padding-top: 220rpx;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;

                        .tcgx {
                            position: absolute;
                            width: 380rpx;
                            height: 100rpx;
                            top: 70rpx;
                            left: 180rpx;
                        }

                        .tcxx {
                            position: absolute;
                            width: 380rpx;
                            height: 100rpx;
                            top: 70rpx;
                            left: 180rpx;
                        }

                        .jp {
                            width: 100%;
                            height: 60rpx;
                            display: flex;

                            .jpicm {
                                width: 60rpx;
                                height: 60rpx;
                                box-sizing: border-box;
                                padding: 4rpx;
                            }

                            .jptext {
                                height: 60rpx;
                                line-height: 60rpx;

                                font-weight: 900;
                                color: #ff6162;
                                font-size: 17px;
                                text-align: center;
                                vertical-align: middle;

                                /*#ifdef APP-PLUS*/
                                width: 100%;
                                /*#endif*/

                                /*#ifdef H5*/
                                width: 220rpx;
                                /*#endif*/
                            }
                        }
                    }

                }

                .tcbtn {
                    width: 200rpx;
                    height: 100rpx;
                    position: relative;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
        }
    }
</style>